import * as api from '@/services/report';
import * as utils from '@/utils/utils';
import { ReloadOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Card, Col, Row, Space, Statistic } from 'antd';
import React, { useRef, useState } from 'react';
const { Countdown } = Statistic;

const List: React.FC = () => {
  const actionRef = useRef<ActionType>();

  const [countdownTicks, setCountdownTicks] = useState<number>(
    Date.now() + 60000,
  );

  const [data, setData] = useState<API.RegistStatList | undefined>(undefined);
  const [preData, setPreData] = useState<API.RegistStatList | undefined>(
    undefined,
  );

  const reload = () => {
    actionRef.current?.reload();
    setCountdownTicks(Date.now() + 60000);
  };

  const loadData = async (
    params: { [key: string]: any },
    sorter?: { [key: string]: any },
    filter?: { [key: string]: any },
  ) => {
    const result = await api.registStat(params, sorter, filter);

    if (result.success) {
      setPreData(data);
      setData(result);
    }

    return Promise.resolve(result);
  };

  const getMinuteAddText = () => {
    if (data == undefined || preData == undefined) {
      return ``;
    }
    return (
      <>
        <div style={{ fontSize: 14, color: 'gray' }}>
          +
          {utils.formatNumber(
            data.todayRegistStat.total - preData.todayRegistStat.total,
          )}
        </div>
      </>
    );
  };

  const getActiveStatText = () => {
    if (data == undefined) {
      return `0 / 0`;
    }
    return `${utils.formatNumber(data.activeStat.t7)} / ${utils.formatNumber(
      data.activeStat.t30,
    )}`;
  };
  const getActiveStat3DayText = () => {
    if (data == undefined) {
      return `0 / 0 / 0`;
    }
    return `${utils.formatNumber(data.activeStat.t0)} / ${utils.formatNumber(
      data.activeStat.t1,
    )} / ${utils.formatNumber(data.activeStat.t2)}`;
  };

  let columns: ProColumns<API.RegistStat>[] = [
    {
      title: '日期',
      align: 'center',
      width: 180,
      dataIndex: 'date',
      valueType: 'date',
    },
    {
      title: '合计',
      align: 'center',
      dataIndex: 'total',
      render: (_, record) => {
        return utils.formatNumber(record.total);
      },
    },
    {
      title: '苹果',
      align: 'center',
      dataIndex: 'ios',
      render: (_, record) => {
        return utils.formatNumber(record.ios);
      },
    },
    {
      title: '安卓',
      align: 'center',
      dataIndex: 'android',
      render: (_, record) => {
        return utils.formatNumber(record.android);
      },
    },
    {
      title: '安卓(GooglePlay)',
      align: 'center',
      dataIndex: 'androidGoogle',
      render: (_, record) => {
        return utils.formatNumber(record.androidGoogle);
      },
    },
    {
      title: '安卓(APK)',
      align: 'center',
      dataIndex: 'androidUniversal',
      render: (_, record) => {
        return utils.formatNumber(record.androidUniversal);
      },
    },
  ];

  return (
    <PageContainer>
      <Card
        extra={
          <Space>
            <Countdown
              title=""
              key="cdRefresh"
              value={countdownTicks}
              format="s"
              prefix=""
              suffix="秒后刷新"
              valueStyle={{
                fontSize: 14,
                color: 'gray',
              }}
              onFinish={reload}
            />
            <ReloadOutlined onClick={reload} />
          </Space>
        }
        style={{ marginBottom: 20 }}
      >
        <Row gutter={16}>
          <Col span={6}>
            <Statistic
              title="当前在线"
              value={utils.formatNumber(data?.currentConnCount)}
            />
          </Col>
          <Col span={6}>
            <Statistic
              title="今日新增"
              value={utils.formatNumber(data?.todayRegistStat.total)}
              suffix={getMinuteAddText()}
            />
            <Statistic
              value={utils.formatNumber(data?.totalUser)}
              valueStyle={{
                fontSize: 16,
                color: 'gray',
              }}
            />
          </Col>
          <Col span={6}>
            <Statistic title="活跃用户(周/月)" value={getActiveStatText()} />
          </Col>
          <Col span={6}>
            <Statistic
              title="活跃用户(今天/昨天/前天)"
              value={getActiveStat3DayText()}
            />
          </Col>
        </Row>
      </Card>
      <ProTable
        rowKey="id"
        options={{
          fullScreen: false,
          reload: true,
          setting: false,
          density: false,
        }}
        columnEmptyText={''}
        actionRef={actionRef}
        columns={columns}
        search={false}
        pagination={false}
        request={loadData}
      />
    </PageContainer>
  );
};

export default List;
